<template>
	<view>
		<myheader ref="myheader"></myheader>
		<view class="my-page-content ">
			<view class="my-title">完善入住须知</view>
			<view class="my-m-title">入退时间</view>
			<view class="mb10 flex-between">
				<span>最早入住时间</span>
				<span @click="changeTime('check_in')" class="grey-tips">
					入住当日 {{formData.check_in}}
					<uni-icons class="my-right-icon" color="#999" type="right" size="18"></uni-icons>
				</span>
			</view>
			<view class="mb10 flex-between">
				<span>最晚退房时间</span>
				<span @click="changeTime('check_out')" class="grey-tips"> 
				退房当日 {{formData.check_out}}  
				<uni-icons color="#999" class="my-right-icon" type="right" size="18"></uni-icons>
				</span>
			</view>
			<view class="mb10 flex-between">
				<span>最少入住</span>
				<span class="grey-tips flex-between">
					<input class="my-border-b" v-model.number="formData.days" style="width: 100rpx" type="number" />
					<span>晚 </span>
				</span>
			</view>


			<view class="my-m-title">入住要求</view>
			<view class="mb10 flex-between">
				<span>是否允许携带宠物</span>
				<van-switch :active-value="1" :inactive-value="0" :checked="formData.pet"
					@change="changeValue($event, 'pet')" inactive-color="#ccc" size="20px" active-color="#FCE353" />
			</view>
			<view class="mb10 flex-between">
				<span>是否允许儿童入住</span>
				<van-switch :active-value="1" :inactive-value="0" :checked="formData.child"
					@change="changeValue($event, 'child')" inactive-color="#ccc" size="20px" active-color="#FCE353" />
			</view>
			<view class="mb10 flex-between">
				<span>是否允许吸烟和大麻</span>
				<van-switch :active-value="1" :inactive-value="0" :checked="formData.smoking"
					@change="changeValue($event, 'smoking')" inactive-color="#ccc" size="20px" active-color="#FCE353" />
			</view>
			<view class="mb10 flex-between">
				<span>是否允许聚会活动</span>
				<van-switch :active-value="1" :inactive-value="0" :checked="formData.party"
					@change="changeValue($event, 'party')" inactive-color="#ccc" size="20px" active-color="#FCE353" />
			</view>
			<view class="mb10">其他要求（选填）</view>
			<van-field custom-class="my-textare-class" :value="formData.other_notice"
				@change="changeValue($event, 'other_notice')" maxlength="200" show-word-limit="true" label=" "
				:title-width="0" type="textarea" placeholder="请输入" autosize :border="false" />

			<view class="my-m-title">退款政策</view>
			<view v-html="refundInfo"> </view>




		</view>

		<footBtn btnText="保存" @nextStep="nextStep"></footBtn>

		<van-popup :show="visible" class="login-confirm" round position="bottom"
			custom-style="padding: 20rpx 35rpx 41rpx;">
			<van-datetime-picker type="time" title="选择时间" :value="currentTimeObj.time" :filter="filter"
				@confirm="confirm" @cancel="visible = false" />

		</van-popup>

	</view>
</template>


<script>
	import footBtn from '@/components/myBtn/footBtn.vue';
	import myheader from '../components/myheader.vue';
	export default {
		components: {
			footBtn,
			myheader
		},
		data() {
			return {
				formData: {
					id: this.$getStorage('houseId'),
					check_in: '14:00',
					check_out: '12:00',
					days: 3,
					pet: 0,
					child: 0,
					smoking: 0,
					party: 0,
					other_notice: ''
				},
				visible: false,
				headerIndex: 3,
				currentTimeObj: {
					name: '',
					time: ''
				},
				filter(type, options) {
					if (type === 'minute') {
						return ['00', '30']
					}

					return options;
				},
				refundInfo: ''
			}
		},
		onShow() {
			this.$refs.myheader.setHeaderIndex(3);
			this.houseId = this.$getStorage('houseId') || 4;
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				this.getConfiguration();
				if (this.$getStorage('houseId')) {
					this.getHouseInfo();
				}
			},
			getHouseInfo() {
				this.$http.getMyHouseInfo(this.houseId).then(res => {
					Object.keys(this.formData).forEach(key => {
						if (res[key] || res[key] === 0) {
							this.formData[key] = res[key];
						}
					})

				})
			},
			getConfiguration() {
				this.$http.getConfiguration().then(res => {
					res.forEach(item => {
						if (item.type == 'refund-policy') {
							this.refundInfo = item.content;
						}
					})
				});
			},
			changeValue(e, name) {
				this.formData[name] = e.detail;
			},
			confirm(data) {
				this.visible = false;
				this.formData[this.currentTimeObj.name] = data.detail;
			},
			changeTime(name) {
				this.visible = true;
				this.currentTimeObj.name = name;
			},
			nextStep() {
				if (this.formData.days <3 || this.formData.days > 300) {
					this.$toast('入住天数需大于3天小于300天');
					return;
				}
				this.$http.setHouseNotice(this.formData).then(res => {
					this.$goPage(1, '/subPublishHouse/index');
					this.$setStorage('houseId', res.id);
					this.$toast('保存成功')
				});

			}
		}
	}
</script>

<style>

</style>